<template>
	<view class="box">
		<view class="list">
			<view class="li">
				<image src="https://s1.ax1x.com/2022/11/27/zUNFdx.png" mode=""></image>
				<text>{{addData.mobile}}</text>
			</view>
			<view class="li code">
				<image src="https://s1.ax1x.com/2022/11/27/zUNGY8.png" mode=""></image>
				<input type="text" placeholder="输入验证码" maxlength="6" v-model="addData.code">
				<view class="get" @click="getcode" v-if="!disabled">
					{{time}}
				</view>
				<view class="get" @click="getcode" v-else>
					{{time}}
				</view>
			</view>
			<view class="li newstel" style="border-bottom: none;">
				<image src="https://s1.ax1x.com/2022/11/27/zUNtSg.png" mode=""></image>
				<input v-model="newMobile" type="text" placeholder="请输入新的手机号" maxlength="11">
			</view>
		</view>
		<view class="go" @click="go()">
			下一步
		</view>
	</view>
</template>

<script>
	import {
		reqcode,
		updataCode
	} from '@/pages/utils/api.js'
	export default {
		data() {
			return {
				mobile: '',
				newMobile:'',
				addData:{
					mobile:'',
					code:''
				},
				time: '获取验证码',
				currentTime: 10,
				disabled: true,
				interval: null,
			}
		},
		onLoad(potion) {
			this.addData.mobile = potion.mobile
		},
		methods: {
			// 获取验证码
			async getcode() {
				if (this.addData.mobile == "") {
					uni.showToast({
						title: "请先填写手机号",
						icon: 'error'
					})
				} else {
					if (this.disabled === true) {
						this.interval = setInterval(() => {
							this.currentTime--
							this.time = this.currentTime + '秒'
							if (this.currentTime == 0) {
								clearInterval(this.interval)
								this.time = '重新发送',
									this.currentTime = 60
							}
						}, 1000)
					}
					let res = await reqcode({mobile: this.addData.mobile,})
					if(res.errCode==10000){
						uni.showToast({
							title:'发送成功',
							icon:'success'
						})
					}
					console.log(res);
				}
			},
			// 下一步
		 	async go() {
				const regMobile=/^1[3|5|6|7|8|9]\d{9}$/
				// if(!this.$utils.checkMobile(this.mobile))return
				if(!this.addData.code&&this.addData.code.length!=6){
					uni.showToast({
						title:"请输入6位验证码",
						icon:'none'
					})
					return
				}else if(!regMobile.test(this.newMobile)){
					uni.showToast({
						title:"手机号不合法",
						icon:'none'
					})
					return
				}else if(this.addData.mobile===this.newMobile){
					uni.showToast({
						title:"请输入不同的手机号",
						icon:'none'
					})
					return
				}
				let res = await updataCode(this.addData)
				console.log(res);
				uni.navigateTo({
					url: `../upmobile1/upmobile1?mobile=${this.newMobile}`
				})
			}
		}
	}
</script>

<style lang="less">
	.box {
		width: 100%;
		height: 100vh;
		background-color: #f6f5f5;
	}

	.list {
		width: 100%;
		height: 332rpx;
		background-color: #fff;
	}

	.li {
		width: 716rpx;
		height: 103rpx;
		border-bottom: 1rpx solid #efefef;
		margin-left: 17rpx;
		display: flex;
		align-items: center;

		image {
			width: 23rpx;
			height: 32rpx;
			margin-right: 34rpx;
			margin-left: 10rpx;
		}

		text {
			font-size: 20rpx;
			color: #666666;
		}
	}

	.code {
		image {
			width: 28rpx;
			height: 32rpx;
		}

		input {
			width: 350rpx;
			font-size: 20rpx;
		}
	}

	.newstel {
		input {
			font-size: 20rpx;
		}
	}

	.go {
		width: 512rpx;
		height: 75rpx;
		background-color: #1f8fff;
		margin-left: 119rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 75rpx;
		margin-top: 50rpx;
		color: #fff;
	}

	.get {
		font-size: 24rpx;
		color: #2f6ab4;
		position: absolute;
		top: 145rpx;
		right: 80rpx;
	}
</style>
